import React, { useState, useEffect } from 'react';
// import { Progress } from 'antd';
import { Progress, Button, message } from 'antd';
import { updateDevice } from '@/services/mockApi/deviceManage';

const RegisterProgress = (props) => {
  const [curProgress, setCurProgress] = useState(0);
  const [isLoading, setIsLoading] = useState(false);
  useEffect(() => {
    if (curProgress < 100) {
      const timer = setTimeout(() => {
        setCurProgress(curProgress + 50);
        clearTimeout(timer);
      }, 2500);
    }
  }, [curProgress]);
  /**
   * 点击完成注册按钮回调
   */
  const handleSuccess = () => {
    // 由于需要调用接口，点击按钮时展示 loading 状态
    setIsLoading(true);
    updateDevice({
      ...props.deviceInfo,
      status: 'Registered',
    }).then(() => {
      message.success('设备注册成功！');
      // history.goBack();
      // 改变设备注册状态
      props?.changeStatus('Registered');
    });
  };
  return (
    <>
      <Progress
        type="circle"
        strokeColor={{
          '0%': '#108ee9',
          '100%': '#87d068',
        }}
        percent={curProgress}
      />
      {curProgress === 100 && (
        <div>
          <Button
            type="primary"
            style={{ marginTop: '20px' }}
            loading={isLoading}
            onClick={handleSuccess}
          >
            点击完成注册
          </Button>
        </div>
      )}
    </>
  );
};
export default RegisterProgress;
